<template>
    <view class="content" :style="{height:height+'px'}">
        <view class="bottom-two">
            <view class="steps-text" style="line-height: 100upx">请上传本人身份证照片</view>
            <view @click="chooseImage(0)"  :style="{marginLeft:'15%',width: width*0.7+'px',height:width*0.7*168.86/262.5+'px',border:'2px solid #479EEE'}">
                <image mode="scaleToFill" :style="{marginTop:width*0.05*168.86/262.5+'px',width: width*0.5+'px',height:width*0.5*168.86/262.5+'px'}"
                       :src="headImg" alt=""></image>
                <view style="color: #479EEE;font-size: 28upx">上传人像页照片</view>
            </view>
            <view @click="chooseImage(1)" :style="{marginTop:'20px',marginLeft:'15%',width: width*0.7+'px',height:width*0.7*168.86/262.5+'px',border:'2px solid #479EEE'}">
                <image mode="scaleToFill" :style="{marginTop:width*0.05*168.86/262.5+'px',width: width*0.5+'px',height:width*0.5*168.86/262.5+'px'}"
                        :src="emblemImg" alt=""></image>
                <view style="color: #479EEE;font-size: 28upx">上传国徽页照片</view>
            </view>
            <view style="padding:0 20upx;font-size: 28upx;margin-top: 40upx;background: white">
                <view style="padding:10upx 0;display: flex;margin-bottom: 20upx;
                justify-content: space-between;border-bottom: 2px solid rgba(1,1,1,0.2)">
                    <text>请拍摄身份证原件</text>
                    <text style="color: #479EEE">上传证件照片要求</text>
                </view>
                <image mode="widthFix" style="width: 100%;" @click="chooseImage" src="/static/img/upHint.png" alt=""></image>
            </view>
        </view>
        <button type="warn" class="sub-button" @click="next">
            确认上传
        </button>
        <uni-popup :show="starTimeVisible"  mode="fixed" position="bottom" type="bottom"
                   msg="身份证签发日期">
            <picker-view  class="pick-time" :style="{height:height*0.5+'px'}" :value="svalue" @change="bindStartChange">
                <picker-view-column>
                    <view class="item" v-for="(item,index) in syears" :key="index">{{item}}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item,index) in smonths" :key="index">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item,index) in sdays" :key="index">{{item}}日</view>
                </picker-view-column>
            </picker-view>
            <view   class="pick-button" style="width:calc(50% - 1px);border-right: 1px solid #E8E8E8" @click="showStart(false)">
               取消
            </view>
            <view   class="pick-button"  @click="starTimeOk">
                确定
            </view>
        </uni-popup>
        <uni-popup :show="timeVisible"  mode="fixed" position="bottom" type="bottom"
                   msg="身份证有效期截止日期">
            <picker-view  class="pick-time" :style="{height:height*0.5+'px'}" :value="value" @change="bindChange">
                <picker-view-column>
                    <view class="item" v-for="(item,index) in years" :key="index">{{item}}年</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
                </picker-view-column>
            </picker-view>
            <view>
                <radio-group>
                    <radio @click="changeForever" style="transform:scale(0.8);font-size: 36upx;"
                           :checked="forever" color="#D14F43" >长期(若有效期日期为长期，请勾选)</radio>
                </radio-group>
            </view>
            <view @click="showPopup(false)"  class="pick-button"
                  style="width:calc(50% - 1px);border-right: 1px solid #E8E8E8" >
               取消
            </view>
            <view   class="pick-button" @click="timeOk">
                确定
            </view>
        </uni-popup>
    </view>
</template>

<script>
    import API from '../../common/api.js';
    import uniPopup from "@/components/uni-popup/uni-popup.vue"
    var sourceType = [
        ['camera'],
        ['album'],
        ['camera', 'album']
    ]
    var sizeType = [
        ['compressed'],
        ['original'],
        ['compressed', 'original']
    ]
    export default {
        components: {uniPopup},
        data() {
            const years = []
            const months = []
            const days1 = []
            const days2 = []
            const days3 = []
            const days4 = []
            const syears = []
            const smonths = []
            const sdays1 = []
            const sdays2 = []
            const sdays3 = []
            const sdays4 = []
            for (let i = 1970; i <= 2049; i++) {
                syears.push(i)
            }
            for (let i = 2019; i <= 2099; i++) {
                years.push(i)
            }
            for (let i = 1; i <= 12; i++) {
                months.push(i)
                smonths.push(i)
            }
            for (let i = 1; i <= 31; i++) {
                days4.push(i)
                i<31?days1.push(i):''
                i<30?days2.push(i):''
                i<29?days3.push(i):''

                sdays4.push(i)
                i<31?sdays1.push(i):''
                i<30?sdays2.push(i):''
                i<29?sdays3.push(i):''
            }
            return {
                width: uni.getSystemInfoSync().windowWidth,
                buttonText:['准备好了','下一步','确认上传','确定','提交','缴纳诚e金'],
                sourceTypeIndex: 2,
                sizeTypeIndex: 2,
                sourceType: ['拍照', '相册', '拍照或相册'],
                sizeType: ['压缩', '原图', '压缩或原图'],
                starTimeVisible:false,
                timeVisible:false,
                height: '',
                headImg:'/static/img/upHead.png',
                emblemImg:'/static/img/upCountry.png',
                forever:false,
                years,
                year:0,
                months,
                month:0,
                days1,
                days2,
                days3,
                days4,
                days:days1,
                day:0,
                value:[],


                syears,
                syear:1970,
                smonths,
                smonth:1,
                sdays1,
                sdays2,
                sdays3,
                sdays4,
                sdays:days1,
                sday:1,
                svalue:[],
                indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth/(750/100))}px;`,
            }
        },
        onLoad() {
            uni.getSystemInfo('windowHeight').then(r => {
                this.height = r[1].windowHeight
            })
            console.log(this.syear,this.year)
        },
        methods: {
            changeForever(){
             this.forever=!this.forever
            },
            next(){
                if(this.headImg=='/static/img/upHead.png'){
                    uni.showModal({
                        title: '提示',
                        content: '请上传人像页照片',
                        showCancel: false,
                    });
                    return
                }
                if(this.emblemImg=='/static/img/upCountry.png'){
                    uni.showModal({
                        title: '提示',
                        content: '请上传国徽页照片',
                        showCancel: false,
                    });
                    return
                }
                this.showStart(true)
            },
            //上传图片
            chooseImage: async function(num) {
                uni.chooseImage({
                    sourceType: sourceType[this.sourceTypeIndex],
                    sizeType: sizeType[this.sizeTypeIndex],
                    count: 1,
                    success: (res) => {
                        console.log(2)
                        this.urlTobase64Default(res.tempFilePaths[0],num);
                    }
                })
            },
            //得到base64--默认
            urlTobase64Default(url,num){
                wx.getFileSystemManager().readFile({
                    filePath: url, //选择图片返回的相对路径
                    encoding: 'base64', //编码格式
                    success: res => { //成功的回调
                        let base64 = 'data:image/jpeg;base64,' + res.data; //不加上这串字符，在页面无法显示的哦
                        let params = {
                            base64Str: base64
                        }
                        API.base64Upload(params).then(res=>{
                            if(res.status==200){
                                num?this.emblemImg=res.data:this.headImg=res.data
                            }else{
                                uni.showModal({
                                    title: '提示',
                                    content: '上传失败，请重试',
                                    showCancel: false,
                                });
                            }
                        })
                    }
                })
            },
            showStart(flag){
                this.starTimeVisible=flag
            },
            showPopup(flag){
                if(flag){
                    const date = new Date()
                    const year = date.getFullYear()
                    const month = date.getMonth() + 1
                    const day = date.getDate()
                    this.year=year
                    this.month=month
                    this.day=day
                    this.value=[this.years-1, this.month - 1, this.day - 1]
                }
                this.timeVisible=flag
            },
            bindStartChange (e) {
                const val = e.detail.value
                this.syear = this.syears[val[0]]
                this.smonth = this.smonths[val[1]]
                this.sday = this.sdays[val[2]]
                if([1,3,5,7,8,10,12].indexOf(this.smonth)>-1){
                    this.sdays=this.sdays4
                }else if([4,6,9,11].indexOf(this.smonth)>-1){
                    this.sdays=this.sdays1
                }else if(this.year%4==0){
                    this.sdays=this.sdays2
                }else{
                    this.sdays=this.sdays3
                }
                console.log(this.syear,this.smonth,this.sday)
            },
            bindChange (e) {
                const val = e.detail.value
                this.year = this.years[val[0]]
                this.month = this.months[val[1]]
                this.day = this.days[val[2]]
                if([1,3,5,7,8,10,12].indexOf(this.month)>-1){
                    this.days=this.days4
                }else if([4,6,9,11].indexOf(this.month)>-1){
                    this.days=this.days1
                }else if(this.year%4==0){
                    this.days=this.days2
                }else{
                    this.days=this.days3
                }
                console.log(this.year,this.month,this.day)
            },
            starTimeOk(){
                const date = new Date()
                console.log(this.svalue[0],this.svalue[1],this.value[2])
                let selectDate=new Date(this.syear+'-'+this.smonth+'-'+this.sday+' 00:00:00')
                console.log(selectDate.getTime(),date.getTime())
                if(selectDate.getTime()>date.getTime()){
                    uni.showModal({
                        title: '提示',
                        content: '签发日期不能大于当前日期',
                        showCancel: false,
                    });
                }else{
                    this.starTimeVisible=false
                   this.showPopup(true)
                }
            },
            timeOk(){
                if(this.forever){
                    this.timeVisible=false
                    let stepsData=JSON.parse(uni.getStorageSync('stepsData'));
                    stepsData.idFrontImage=this.headImg
                    stepsData.idBackImage=this.emblemImg
                    stepsData.idCardSignDate=this.syear+(this.smonth<10?'-0':'-')+this.smonth+(this.sday<10?'-0':'-')+this.sday
                    stepsData.idCardInvalidDate='forever'
                    uni.setStorage({
                        key: 'stepsData',
                        data: JSON.stringify(stepsData),
                        success: function () {
                            uni.navigateTo({
                                url: '../steps/index4'
                            });
                        }
                    });
                }else{
                  const date = new Date()
                    console.log(this.value[0],this.value[1],this.value[2])
                  let selectDate=new Date(this.year+'-'+this.month+'-'+this.day+' 23:59:59')
                  if(this.year<=this.syear){
                      uni.showModal({
                          title: '提示',
                          content: '截止日期年份不能小于或等于签发日期年份',
                          showCancel: false,
                      });
                      return;
                  }
                  console.log(selectDate.getTime(),date.getTime())
                  if(selectDate.getTime()<date.getTime()){
                      uni.showModal({
                          title: '提示',
                          content: '请勿选择过去的日期',
                          showCancel: false,
                      });
                      return
                  }else{
                      this.timeVisible=false

                      let stepsData=JSON.parse(uni.getStorageSync('stepsData'));
                      stepsData.idFrontImage=this.headImg
                      stepsData.idBackImage=this.emblemImg
                      stepsData.idCardSignDate=this.syear+(this.smonth<10?'-0':'-')+this.smonth+(this.sday<10?'-0':'-')+this.sday
                      stepsData.idCardInvalidDate=this.year+(this.month<10?'-0':'-')+this.month+(this.day<10?'-0':'-')+this.day
                      uni.setStorage({
                          key: 'stepsData',
                          data: JSON.stringify(stepsData),
                          success: function () {
                              uni.navigateTo({
                                  url: '../steps/index4'
                              });
                          }
                      });
                  }
              }
            },
        }
    }
</script>

<style scoped>
    .content {
        height: 100%;
        /*padding-top: 20upx;*/
        background: #F3F3F3;
        padding-bottom: 200upx;
    }
    .steps-text{
        font-size: 28upx;
        font-family: PingFangSC-regular;
    }
    .sub-button{
        width: 98%;
        margin:30upx 0 0 1%;
        background: #D14F43;
        border-radius: 4upx;
    }
    .bottom-two{
        width: 100%;
        text-align: center;
    }
    .pick-time{
        /*background: red;*/
    }
    .pick-button{
        display: inline-block;
        width: 50%;
        border-top:1px solid #E8E8E8;
        border-bottom:1px solid #E8E8E8;
        margin-bottom:constant(safe-area-inset-bottom);
        margin-bottom:env(safe-area-inset-bottom);

    }
</style>
